<template>
<div class="view_container">
    <van-nav-bar
        :title="$route.meta.title"
        left-arrow
        :fixed="true"
        :placeholder="true"
        @click-left="onReturn">
        <template #left>
            <van-icon name="arrow-left" size="21" color="#000000" />
        </template>
    </van-nav-bar>
    <div class="top">
        <van-cell-group>
            <van-field 
                v-model="queryParams.customerName" 
                label="集团客户名称"
                placeholder="请输入"
                readonly />
            <van-field 
                v-model="queryParams.userId" 
                label="终端用户ID" 
                placeholder="请输入" />
            <van-field 
                v-model="queryParams.account" 
                label="终端用户账号" 
                placeholder="请输入"/>
            <van-field 
                v-model="queryParams.leaderPhone" 
                label="负责人手机号" 
                placeholder="请输入"/>
        </van-cell-group>
    </div>
    <ScrollElCp 
        class="container"
        height="calc(var(--clientHeight) - 46px - 176px - 15px - 15px - 15px - 15px - 50px)"
        width="100%">
        <van-list
            v-model="loading"
            :finished="finished"
            :error="error"
            error-text="请求失败"
            :finished-text="flattenTwoList(pageData).length==0?'什么也没找到':'没有更多了'"
            @load="getDataList"
            :immediate-check="false">
            <DataItem
                v-for="(item,index) in flattenTwoList(pageData)"
                :key="index"
                :itemData="item">
            </DataItem>
        </van-list>
    </ScrollElCp>
    <van-button
        class="bt"
        type="primary"
        @click="()=>{
            pageData=[];
            queryParams.page = 0;
            getDataList();
        }"
        :loading="loading">
        再次获取
    </van-button>
</div>
</template>
<script>
//查询验证码
import {flattenTwoList} from "@/common/OtherTools";
import DataItem from "@/components/findData/DataItem";
export default {
    name: 'FindData',
    components: {
        DataItem,
    },
    data(){
        return {
            loading: false,
            finished:false,
            error:false,
            pageData:[],
            queryParams: {  //查询条件
                customerName:'',
                customerId:'',
                userId:'',
                account:'',
                leaderPhone:'',
                page: 0,
                size: 100,
            },
        };
    },
    created(){
        this.queryParams.customerId = this.$route.params.customerId;
        this.queryParams.userId = this.$route.params.userId;
        this.queryParams.leaderPhone = this.$route.params.leaderPhone;
        this.queryParams.account = this.$route.params.account;
        this.queryParams.customerName = this.$route.params.customerName;
        this.getDataList();
    },
    methods:{
        flattenTwoList,
        getDataList(){
            this.queryParams.page++;
            this.error = false;
            this.loading = true;
            this.finished = false;
            this.$Api.getCustomerInfo1(
                this.queryParams,
            ).then((res) => {
                let dataList = res.data.list;
                // this.queryParams.page = res.data.page;
                this.$set(this.pageData,this.queryParams.page-1,dataList);  //索引必须是页数减一
                this.pageData.length = this.queryParams.page;  //数组的长度必须和页数对应
                this.total = parseInt(res.data.total);
                //如果是最后一页
                if(flattenTwoList(this.pageData).length >= this.total){
                    this.finished = true;
                }
            }).catch(res=>{
                this.queryParams.page--;
                this.error = true;
                this.$notify({
                    type: 'danger',
                    message: res.msg,
                    duration: 1000,
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
        onReturn() {
            this.$router.go(-1);
        },
    },
}
</script>
<style scoped lang="scss">
.view_container {
    background-color: #f0f2f5;
    height: var(--clientHeight);
    padding:15px;
    padding-top: 0;
    box-sizing: border-box;
    display: grid;
    grid-gap: 15px;
    .top {
        width: 100%;
        display: flex;
        align-items: center;
        height: fit-content;
        /deep/.van-cell-group {
            padding: 0px !important;
            background-color: white;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            .van-cell{
                padding: 10px !important;
            }
        }
    }
    .container {
        overflow: auto;
        border-radius: 10px;
        background-color: white;
    }
    /deep/.bt{
        width: 100%;
        padding: 25px 0 !important;
        border-radius: 50px !important;
        font-size: 16px;
        font-weight: bold;
    }
}
</style>
